<template>
  <j-modal
    :title="title"
    :width="1000"
    :bodyStyle="bodyStyle"
    :visible="visible"
    switchFullscreen
    @cancel="handleCancel"
    :footer="null"
    cancelText="关闭">
    <a-card :bordered="false">
      <div style="margin: 0 auto;" >
        <FullCalendar
          ref="baseCalendar"
          resourceLabelText="会议室"
          resourceAreaWidth="20%"
          height="auto"
          locale="zh-cn"
          selectable="true"
          selectHelper="true"
          :plugins="calendarPlugins"
          :firstDay="firstDay"
          weekNumberCalculation="ISO"
          :select-allow="handlerSelectAllow"
          :header="header"
          :default-view="currentView"
          :buttonText="buttonText"
          :schedulerLicenseKey="licenseKey"
          :resources="resources"
          :events="calendarEventsNew"
          @datesRender="datesRender"
          @eventMouseEnter="eventMouseEnter"
          @eventMouseLeave="eventMouseLeave"
        ></FullCalendar>
        <a-empty v-if="resources.length==0" style="margin-top: 10px"/>
      </div>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      />
      <!--回显气泡-->
      <div v-if="showBox">
        <a-tooltip v-model="popvisible" :style="{position:'absolute',left: tranLeft, top: tranTop}">
          <template slot="title">
            {{ item.title }}<br>
            {{ item.start | dayjs() }}<br>
            {{ item.end | dayjs() }}
          </template>
        </a-tooltip>
      </div>
    </a-card>
  </j-modal>
</template>

<script>
import moment from 'moment';
import {getAction} from '@/api/manage'
import FullCalendar from '@fullcalendar/vue';
import '@fullcalendar/core/main.css';
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'
import {CalendarMixin} from '@/views/oa/metting/mixins/CalendarMixin'

export default {
  name: 'EoaMettingRoomUseModal',
  mixins: [CalendarMixin],
  components: {
    FullCalendar
  },
  data() {
    return {
      title: '会议使用情况',
      columns: [
        {
            title: '会议名称',
            align: 'center',
            dataIndex: 'name'
          }, {
            title: '召集人',
            align: 'center',
            dataIndex: 'originator_dictText'
          }, {
            title: '位置',
            align: 'center',
            dataIndex: 'location_dictText'
          }, {
            title: '开始时间',
            align: 'center',
            dataIndex: 'beginTime'
          }, {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endTime'
          }, {
            title: '状态',
            align: 'center',
            dataIndex: 'status_dictText'
          }
        ],
        loading: false,
        dataSource: [],
        /* 分页参数 */
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* table选中keys */
        selectedRowKeys: [],
        /* table选中records */
        selectionRows: [],
        visible: false,
        resourceIsNull: true,
        currentView: 'resourceTimelineDay',
				tranLeft: 0,
        tranTop: 0,
        marginTop: 0,
        marginLeft: 0,
        popvisible: true,
        showBox: false,
        calendarFlag: true,
        eventMouseEnter: info => this.eventEnter(info),
        eventMouseLeave: info => this.eventLeave(info),
        bodyStyle: {
          height: (window.innerHeight * 0.85) + 'px',
          'overflow-y': 'auto'
        },
        offsetX: 480,
        offsetY: 180,
        Fullscreen: false
    }
  },
    created() {

    },
    methods: {
      moment,
      show() {
        this.loadRoom();
        this.loadAllMetting();
        this.visible = true;
      },
      loadAllMetting() {
        var params = {};// 查询条件
        params.pageNo = this.ipagination.current;
        params.pageSize = this.ipagination.pageSize;
        this.loading = true;
        getAction('/api/erpmng/eoa/metting/eoaMetting/list', params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      eventEnter(info) {
        console.log('info.jsEvent', info.jsEvent)
        this.tranLeft = (info.jsEvent.pageX - this.offsetX) + 'px';
        this.tranTop = (info.jsEvent.pageY - this.offsetY) + 'px';
    /*    if(!this.Fullscreen){

        }else{
          this.tranLeft = (info.jsEvent.pageX-10) + 'px';
          this.tranTop = (info.jsEvent.pageY-80) + 'px';
        } */
        this.$nextTick(() => {
          this.item = info.event
        })
        // 点击的时候显示模态框
        this.showBox = true;
      },
      eventLeave(info) {
        this.showBox = false
      },
      handleCancel () {
        this.close()
      },
      close () {
        this.visible = false;
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  @import '~@/assets/less/TableExpand.less';
  /deep/  .fc-button-primary {
    background-color: #1890FF !important;
    border-color: #1890FF !important;
  }
</style>
